<script setup>

import {
  Rank,
  Odometer,
  Menu as IconMenu,
  Finished,
  Avatar,
  ChatDotSquare, SwitchButton, CircleCheck,
  Headset,
  Burger,
  Picture,
  ChatDotRound
} from '@element-plus/icons-vue'
import {computed, ref} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
let router = useRouter();
let store = useStore();
//获取localStorage保存的内容
const data = computed(()=>{
  return JSON.parse(localStorage.getItem('myUsername'));
});

const userObj = computed(()=>{
  return store.state.user;
})

const change = computed(()=>{
  return store.state.isCollapse;
})

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
//把数组捞过来然后判断点击事件的值里是否有此元素,有的话就不添加了  没有就添加
//数组一边  就会重新接收
let rightArr = computed(()=> {
  //接受数组
  return store.state.tagArr;
});
//Tag点击事件
const upload = function (path, title) {
  console.log(rightArr.value)
  //初始变量  假设不重复
  let isFind = ref(false);
  //遍历判断
  for (let i = 0; i < rightArr.value.length; i++) {
    //重复了
    if (rightArr.value[i].title === title && rightArr.value[i].path === path) {
      console.log(rightArr.value[i]);
      isFind.value = true;
    }
  }
  //为false 不重复
  if (isFind.value === false) {
    store.commit("setTagArr", {path: path, title: title});
  }
}
//退出登录
const logout = () => {
  sessionStorage.removeItem('user'); // 移除user键对应的项
  sessionStorage.removeItem('token');
  // 或者 sessionStorage.setItem('user', null); 也可达到类似效果，参考前面的解释
  router.push('/login'); // 跳转到登录页面
};


</script>

<template>

<div>

<!--  <el-affix :offset="120">-->
<!--    <el-button type="primary">-->
<!--      -->
<!--    </el-button>-->
<!--  </el-affix>-->
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="change"
      @open="handleOpen"
      @close="handleClose"
  >

    <ul class="yonhukuang">
      <li class="yonhukuang-left" @click="router.push('/home/user')" style="cursor: pointer">
        <img :src="userObj.consultantAvatar" width="60px" @click="upload('/home/user','个人中心')">
      </li>
      <li class="yonhukuang-right" :class="{active:change}">
        <div>{{userObj.consultantName}}</div>
        <ul>
          <li>
            <el-icon style="background-color: #00F7DE;border-radius: 50%"><CircleCheck /></el-icon>
          </li>
          <li>
            <el-icon @click="logout" style="background-color: orangered;border-radius: 50%;cursor: pointer"><SwitchButton /></el-icon>
          </li>
        </ul>
      </li>
    </ul>
    <el-menu-item index="2">
      <el-icon><Avatar /></el-icon>
      <template #title>
        <router-link :to="{path:'/home/xitong'}"  @click="upload('/home/xitong','系统用户表')" >
          系统用户表</router-link>
      </template>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>文章表类</span>
      </template>
      <el-menu-item-group>
        <template #title></template>
        <el-menu-item index="3-1" @click="upload('/home/wz','精选文章表')">
          <router-link :to="{path:'/home/wz'}">精选文章表</router-link>
        </el-menu-item>
        <el-menu-item index="3-2" @click="upload('/home/wzfenlei','文章分类表')">
          <router-link :to="{path:'/home/wzfenlei'}">文章分类表</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>咨询师表类</span>
      </template>
      <el-menu-item-group>
        <template #title><span></span></template>
        <el-menu-item index="4-1" @click="upload('/home/zixunshi','咨询师表')">
          <router-link :to="{path:'/home/zixunshi'}">咨询师表</router-link>
        </el-menu-item>
       
      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="5">
      <el-icon><Rank /></el-icon>
      <template #title>
        <router-link :to="{path:'/home/shanchang'}" @click="upload('/home/shanchang','擅长领域表')">擅长领域表</router-link>
      </template>
    </el-menu-item>
    <el-menu-item index="6">
      <el-icon><Rank /></el-icon>
      <template #title>
        <router-link :to="{path:'/home/Fee'}" @click="upload('/home/Fee','价格标准')">价格标准表</router-link>
      </template>
    </el-menu-item>
    <el-sub-menu index="7">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>课程表类</span>
      </template>
      <el-menu-item-group>
        <template #title><span></span></template>
        <el-menu-item index="7-1" @click="upload('/home/kcb','课程表')">
          <router-link :to="{path:'/home/kcb'}">课程表</router-link>
        </el-menu-item>
        <el-menu-item index="7-2" @click="upload('/home/kcfenlei','课程分类表')">
          <router-link :to="{path:'/home/kcfenlei'}">课程分类表</router-link>
        </el-menu-item>

        <el-menu-item index="7-3" @click="upload('/home/kcpingjia','课程分类表')">
          <router-link :to="{path:'/home/kcpingjia'}">课程评价</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>


    <el-sub-menu index="8">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>回复表类</span>
      </template>
      <el-menu-item-group>
        <template #title><span></span></template>
        <el-menu-item index="8-1" @click="upload('/home/zixunhuifu','咨询回复表')">
          <router-link :to="{path:'/home/zixunhuifu'}">咨询回复表</router-link>
        </el-menu-item>
        <el-menu-item index="8-2" @click="upload('/home/yonghupingjia','用户评价表')">
          <router-link :to="{path:'/home/yonghupingjia'}">用户评价表</router-link>
        </el-menu-item>
        <el-menu-item index="8-3" @click="upload('/home/wenti','问题表')">
          <router-link :to="{path:'/home/wenti'}">问题表</router-link>
        </el-menu-item>
        <el-menu-item index="8-4" @click="upload('/home/huifu','回复表')">
          <router-link :to="{path:'/home/huifu'}">回复表</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>

    <el-menu-item index="9">
      <el-icon><ChatDotSquare /></el-icon>
      <template #title>
        <router-link :to="{path:'/home/zxgonggao'}" @click="upload('/home/zxgonggao','资讯公告表')">资讯公告表</router-link>
      </template>
    </el-menu-item>
    <el-menu-item index="12">
      <el-icon><Headset /></el-icon>
      <template #title>
        <router-link :to="{path:'/home/audiofm'}" @click="upload('/home/audiofm','音频FM')">
          音频FM
        </router-link>
      </template>
    </el-menu-item>
    <el-menu-item index="10">
      <el-icon><Headset /></el-icon>
      <template #title>
        <router-link :to="{path:'/home/zhishi'}" @click="upload('/home/zhishi','心理知识')">心理知识</router-link>
      </template>
    </el-menu-item>

    <el-menu-item index="11">
      <el-icon><Burger /></el-icon>
      <template #title>
        <router-link :to="{path:'/home/gongyizhongxin'}" @click="upload('/home/gongyizhongxin','公益中心')">公益中心</router-link>
      </template>
    </el-menu-item>



  </el-menu>

</div>

</template>

<style scoped>
.el-menu{
  border: none!important;
}
.el-menu-item{
  background-color: #2F4050;
}
.el-menu-item a,.el-menu-item i{
  color: white;
}
.el-sub-menu{
  background-color: #2F4050;
}
.el-sub-menu a,.el-sub-menu i,.el-sub-menu span{
  color: white;
}
.el-menu-item-group{
  background-color: #2F4050;
}


.yonhukuang{
  display: flex;
  align-items: center;
}
.yonhukuang-left{
  /*background-color: #FFB800;*/
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.yonhukuang-left img{
  border-radius: 50%;
}
.yonhukuang{
  display: flex;
  justify-content: space-between;
  background-color: #2F4050;
}
.yonhukuang-right{
  /*background-color: #01AAED;*/
  width: 80px;
}
.yonhukuang-right ul{
  margin-top: 5px;
  display: flex;
}
.yonhukuang-right ul li{
  margin-right: 20px;
}
.yonhukuang-right>div{
  color: white;
  font-size: 13px;
}
.active{
  display: none;
}



</style>